<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制器</title>
    <script src="js/angular.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{firstName + " " + lastName}}

</div>
<div ng-controller="myCtrl2">

    名: <input type="text" ng-model="firstName3"><br>
    姓: <input type="text" ng-model="lastName3"><br>
    <br>
    姓名: {{firstName1 + " " + lastName1}}

</div>


<div ng-controller="personCtrl">

    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{fullName()}}

</div>

<div ng-controller="namesCtrl">

    <ul>
        <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>

</div>

<script src="js/ch06.js"></script>

<script>
    var app = angular.module('myApp', []);
    /**
     *  AngularJS 控制器 控制 AngularJS 应用程序的数据。
     AngularJS 控制器是常规的 JavaScript 对象。
     不能跨控制器取值
     定义了控制器必须实现控制器
     */
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });

    app.controller('myCtrl2', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
    app.controller('personCtrl', function ($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.fullName = function () {
            return $scope.firstName + "   " + $scope.lastName;
        }
    })
</script>

</body>
</html>